<template>
  <div class="physicalExamination">
    <mains :title="'预约体检'">
       <template #btn>
        <Button type="primary" class="daoru">导入</Button>
        <Button type="primary">导出</Button>
      </template>
    </mains>
    <!-- 内容 -->
    <div class="content">
      <!-- 表单 -->
      <div class="form_box" style="height: 70px">
        <div class="left">
          <RadioGroup v-model="animal">
            <Radio label="全部"></Radio>
            <Radio label="待就诊" style="margin-left: 15px"></Radio>
            <Radio label="已就诊" style="margin-left: 15px"></Radio>
            <Radio label="已取消" style="margin-left: 15px"></Radio>
          </RadioGroup>
          <Space size="large" wrap style="margin-left: 20px">
            <DatePicker
              type="daterange"
              placement="bottom-end"
              placeholder="请选择日期  —  请选择日期"
              style="width: 240px"
            />
          </Space>
          <Select v-model="model" style="width: 200px; margin-left: 15px">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{
              item.label
            }}</Option>
          </Select>
        </div>
        <div class="inpBox">
          <Input
            v-model="search"
            placeholder="请输入医生、病人姓名"
            style="width: 260px; margin-right: 15px"
            @keydown="handleSearch"
          />
          <Button type="primary" @click="handleSearch">搜索</Button> <!-- 添加点击事件 -->
        </div>
      </div>
      <!-- 表格 -->
      <table id="patientTable">
        <thead>
          <tr>
            <th><input type="checkbox" /></th>
            <th>患者姓名</th>
            <th>就诊卡号</th>
            <th>身份证号</th>
            <th>手机号码</th>
            <th>科室</th>
            <th>检测费</th>
            <th>状态</th>
            <th>就诊日期</th>
            <th>候诊时间</th>
            <th>预约的时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in filteredTableList" :key="index">
            <td><input type="checkbox" /></td>
            <td>{{ item.name }}</td>
            <td>{{ item.card }}</td>
            <td>{{ item.self }}</td>
            <td>{{ item.tel }}</td>
            <td>{{ item.clasz }}</td>
            <td>{{ item.money }}</td>
            <td style="color: #41b108">{{ item.status === 0 ? '已就诊' : '等待就诊' }}</td>
            <td>{{ item.day }}</td>
            <td>{{ item.time }}</td>
            <td>{{ item.yvTime }}</td>
            <td><Icon type="ios-clipboard" style="font-size: 20px" color="#325ad2" @click="toInfo(item.id)"/></td>
          </tr>
        </tbody>
      </table>
      <pageNation
        :total="total"
        @size-change="sizeChange"
        @current-change="currentChange"
        ref="pagenation"
      >
      </pageNation>
    </div>
  </div>
</template>

<script setup>
import mains from '@/components/main.vue'
import pageNation from '@/components/ncComponents/pageNation.vue'
import { useTableData } from '@/nchook/hook.ts'
import { useRouter } from "vue-router"
import { computed, ref } from 'vue'

const router = useRouter()
const {
  cityList,
  search,
  tableList,
  currentPage,
  pageSize,
  total,
  getTableList,
  sizeChange,
  currentChange,
  pagenation,
} = useTableData()

const animal = ref('全部')

const filteredTableList = computed(() => {
  let filtered = tableList.value
  if (search.value) {
    filtered = filtered.filter(item => item.name.includes(search.value))
  }
  if (animal.value === '已就诊') {
    filtered = filtered.filter(item => item.status === 0)
  } else if (animal.value === '待就诊') {
    filtered = filtered.filter(item => item.status !== 0)
  } else if (animal.value === '已取消') {
    // 这里假设数据中有一个字段表示是否已取消，例如 isCancelled
    filtered = filtered.filter(item => item.isCancelled)
  }
  return filtered
})

const toInfo = (id) => {
  router.push({ name: "ncBookingDetails", query: { id: id } })
}

const handleSearch = () => {
  // 这里会自动更新 filteredTableList
  tableList.value=filteredTableList.value
}
</script>

<style scoped>
.inpBox {
  display: flex;
}
.daoru {
  margin-right: 10px;
}
.content {
  margin-left: 12px;
  width: 98%;
  height: 700px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
}
.form_box {
  margin-left: 12px;
  width: 98%;
  height: 100px;
  display: flex;
  justify-content: space-between;
}
table {
  border-collapse: collapse;
  width: 100%;
  border: none; /* 移除表格外边框 */
}

th,
td {
  padding: 8px;
  text-align: left;
  border: none; /* 移除单元格边框 */
  border-bottom: 1px solid #eee; /* 仅保留底部边框用于分隔行 */
}

th {
  background-color: #ffff;
  font-weight: bold;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>